<template>
    <div class="index-top-list-item">
        <el-skeleton v-if="loading" animated>
            <template #template>
                <el-card>
                    <div style="width: 95%; margin: 2.5%; background-color: #e6e8eb;height:30px;"></div>
                    <div style="width: 95%; margin: 2.5%; background-color: #e6e8eb;height:20px;"></div>
                    <div v-for="item in 6" :key="item" style="margin: 20px 10px ;">
                        <el-row :gutter="0">
                            <el-col :span="5">
                                <el-skeleton-item variant="image"
                                    style="width: 3.5vw; height: 3.5vw;border-radius: 10px;" />
                            </el-col>
                            <el-col :span="18" :offset="1">
                                <div style="margin-top: 3%; width: 53%; height: 20px; background-color: #e6e8eb;"></div>
                                <div style="margin-top: 3%; width: 40%; height: 20px; background-color: #e6e8eb;"></div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </template>
        </el-skeleton>
        <el-card v-else>
            <div class="header">
                <div class="name">
                    <el-link @click="router.push(`/rank?rId=${playlist.id}`)" target="_blank">{{ playlist.name }}</el-link>
                </div>
                <div class="updatatime">
                    更新时间：{{ formatDate(props.updateTime) }}（{{ props.updateFrequency }}）
                </div>
            </div>
            <div class="item-list">
                <div class="item" v-for="item in playlist.tracks">
                    <el-row :gutter="0">
                        <el-col :span="5">
                            <el-link @click="router.push(`/song?id=${item.id}`)" :underline="false"
                                :disabled="item.fee == 1 && !isVipUser()"><el-image :src="item.al.picUrl"></el-image>
                            </el-link>
                        </el-col>
                        <el-col :span="13" :offset="1">
                            <div class="al">
                                <div class="al-name">
                                    <span>
                                        <el-link @click="router.push(`/song?id=${item.id}`)"
                                            :disabled="item.fee == 1 && !isVipUser()" :underline="false"
                                            :title="`歌曲：${item.name}`">{{
                                                item.name }}</el-link>
                                    </span>
                                </div>
                                <div class="al-artist">
                                    <span v-for="aritem, index in item.ar">
                                        <el-link @click="router.push(`/singer/detail?id=${aritem.id}`)" v-if="index == 0"
                                            :underline="false" :title="`歌手：${aritem.name}`"
                                            :disabled="item.fee == 1 && !isVipUser()">{{
                                                aritem.name
                                            }}</el-link>
                                        <el-link @click="router.push(`/singer/detail?id=${aritem.id}`)" :underline="false"
                                            :disabled="item.fee == 1 && !isVipUser()" :title="`歌手：${aritem.name}`"
                                            v-else>/{{
                                                aritem.name
                                            }}</el-link>
                                    </span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="songoperate" v-if="!(item.fee == 1 && !isVipUser())">
                                <i class="iconfont icon-add" title="添加到播放列表" @click="addPlayList(item)">
                                    <svg t="1705736805906" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="10652" width="20" height="20">
                                        <path
                                            d="M819.2 189.44a30.72 30.72 0 0 1 1.152 61.41952L819.2 250.88H143.36a30.72 30.72 0 0 1-1.152-61.41952L143.36 189.44h675.84zM819.2 435.2a30.72 30.72 0 0 1 1.152 61.41952L819.2 496.64H143.3856a30.72 30.72 0 0 1-1.152-61.41952l1.152-0.02048H819.2zM542.72 680.96a30.72 30.72 0 0 1 1.152 61.41952L542.72 742.4H143.3856a30.72 30.72 0 0 1-1.152-61.41952l1.152-0.02048H542.72zM880.64 680.98048a30.72 30.72 0 0 1 1.152 61.41952l-1.152 0.02048h-184.32a30.72 30.72 0 0 1-1.152-61.4144l1.152-0.0256h184.32z"
                                            fill="#000000" p-id="10653"></path>
                                        <path
                                            d="M788.48 588.82048a30.72 30.72 0 0 1 30.69952 29.568l0.02048 1.152v184.32a30.72 30.72 0 0 1-61.41952 1.152l-0.02048-1.152v-184.32a30.72 30.72 0 0 1 30.72-30.72z"
                                            fill="#000000" p-id="10654"></path>
                                    </svg>
                                </i>
                                <i class="iconfont icon-fav" title="添加到收藏">
                                    <svg t="1705736622127" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="8621" width="20" height="20">
                                        <path
                                            d="M380.3 336.9l114.1-208.7c0.6-0.1 1-0.3 1.4-0.4-2.9-1.3 4-1.3 0 0 0.4 0.2 1 0.4 1.9 0.6l112.5 208c3.8 7 10.5 11.9 18.3 13.5L877 398.4l-92.4 100.5c-7.8 8.5-6.2 21.9 3.4 28.3 7.6 5.1 17.8 3.9 24.1-2.8l104-111c8.7-9.2 10.7-23 4.8-34.2 0-0.1-0.1-0.2-0.1-0.3-4.3-8.2-12.2-14-21.3-15.7l-241.4-46.3c-7.5-1.4-13.9-6.1-17.6-12.8L515.2 77c-3.9-7.1-11.3-11.6-19.5-11.8h-0.2c-8.4-0.1-16.1 4.5-20.2 11.8l-124 225c-4.4 8-12.2 13.7-21.2 15.4L89.9 363.5c-8.7 1.7-16.4 7.1-20.6 15 0 0 0 0.1-0.1 0.1-6 11.2-3.9 25.1 4.8 34.3l168 179.4c5.6 6 8.3 14.3 7.3 22.5L219 857.1c-1.4 11.2 3.4 22.4 12.7 28.7 0.1 0 0.1 0.1 0.2 0.1 9.1 6.2 21 6.8 30.8 1.8l249.8-125.8c9.5-4.8 13.6-16 9.6-25.8-4.5-10.8-17.1-15.6-27.6-10.5l-232 112.9L294 584.8c0.9-7.5-1.7-15-7.1-20.4L119.7 399.7l242.8-49.6c7.6-1.6 14.1-6.4 17.8-13.2z m539 423.3H791.2V632.1c0-10.9-9.5-19.8-21.2-19.8s-21.2 8.9-21.2 19.8v128.1H620.7c-10.9 0-19.8 9.5-19.8 21.2s8.9 21.2 19.8 21.2h128.1v128.1c0 10.9 9.5 19.8 21.2 19.8s21.2-8.9 21.2-19.8V802.6h128.1c10.9 0 19.8-9.5 19.8-21.2s-8.9-21.2-19.8-21.2z"
                                            p-id="8622"></path>
                                    </svg>
                                </i>
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { formatDate, isVipUser, formatSongDetail } from '@/utils/util'
import { playlistDetail } from '@/api/index/IndexTopListItem'
import { ref, onMounted } from 'vue'
import { usePlayList } from '@/stores/playlist'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
onMounted(async () => {
    loading.value = true
    id.value = props.id
    const res = await playlistDetail(id.value)
    playlist.value = res.playlist
    playlist.value.tracks = [...res.playlist.tracks].splice(0, 6)
    loading.value = false
})
const props = defineProps({
    id: {
        type: Number,
        default: ''
    },
    index: {
        type: Number,
        default: 0
    },
    updateTime: {
        type: Number
    },
    updateFrequency: {
        type: String
    }
})
const loading = ref(true)
const id = ref('')
const playlist = ref({})
const addPlayList = (item) => {
    const obj = formatSongDetail(item)
    let flag = false
    //usePlayList().playlist遍历，如果有相同的id就不添加
    usePlayList().playlist.find((item) => {
        if (item.id == obj.id) {
            ElMessage({
                message: '歌曲已存在列表中',
                type: 'warning'
            })
            flag = true
            return
        }
    })
    if (flag) return
    usePlayList().playlist.push(obj)

}
</script>

<style lang="less" scoped>
.index-top-list-item {
    .header {
        .name {
            .el-link {
                font-size: 24px;
                // font-weight: bold;
                margin-bottom: 10px;
            }
        }

        .updatatime {
            font-size: 16px;
            margin-bottom: 20px;
            color: #7c7c7c;
            height: 20px;
        }
    }



    .item-list {
        overflow: hidden;
        white-space: nowrap;

        .item {
            margin: 15px 0;

            .el-link {
                .el-image {
                    width: 3.5vw;
                    height: 3.5vw;
                    border-radius: 10px;
                }
            }


            .al-name {
                margin-top: 3%;
                white-space: nowrap;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;

                .el-link {
                    font-size: 14px;
                }
            }

            .al-artist {
                margin-top: 3%;
                white-space: nowrap;
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;

                .el-link {
                    font-size: 12px;
                }
            }

            &:hover {

                .songoperate {
                    width: 55px;
                    transition: all .3s ease-in;
                }
            }

            .songoperate {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                width: 0;
                line-height: 48px;
                transition: all .3s ease-in;
                overflow: hidden;

                i {
                    margin-left: 10px;
                    cursor: pointer;
                }
            }
        }

    }
}
</style>